<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box-shadow {
            width: 100px;
            height: 100px;
            background: yellow;
        }

        .text-shadow {
            font-size: 30px;
            font-weight: bold;
        }
    </style>
  </head>
  <body>
    <!--box-shadow属性设置盒子阴影，其属性值需要四个值分别为水平偏移、垂直偏移、模糊半径和颜色。可设置多个阴影样式，不同阴影样式间使用逗号分隔-->
    <div class="box-shadow" style="box-shadow: 10px 10px 10px pink"></div>
    <br><br>
    <div class="box-shadow" style="box-shadow: 10px 10px 10px pink,-5px -5px 0px skyblue"></div>
    <br>

    <!--text-shadow属性设置文本阴影，其属性值需要四个值分别为水平偏移、垂直偏移、模糊半径和颜色。可设置多个阴影样式，不同阴影样式间使用逗号分隔-->
    <div class="text-shadow" style="text-shadow: 2px 2px 2px pink">`text-shadow`属性表示文字阴影</div>
    <div class="text-shadow" style="text-shadow: 2px 2px 2px pink,-2px -2px 2px skyblue">`text-shadow`属性表示文字阴影
    </div>
  </body>
</html>